<template>
  <div class="createPost-container">
    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
      <div class="createPost-main-container">
        <el-row>
          <el-col :span="24">
            <div class="postInfo-container">
              <fieldset class="fieldInfo">
                <legend>
                  <span>检查表主要信息</span>
                </legend>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label-width="115px" label="检查表名称" prop="username">
                      <el-input placeholder="请输入检查表名称" v-model="postForm.paperName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item
                      label-width="115px"
                      label="检查表目标"
                      prop="target"
                      class="postInfo-container-item"
                    >
                      <el-select v-model="postForm.applicableObjectId" placeholder="检查目标">
                        <el-option
                          v-for="(item,index) in ddlTarget"
                          :key="index"
                          :label="item.text"
                          :value="item.value"
                          :selected="item.selected"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :span="8">
                    <el-form-item
                      label-width="115px"
                      label="是否需要分值"
                      prop="roleList"
                      class="postInfo-container-item"
                    >
                      <el-radio-group v-model="postForm.roleList">
                        <el-radio label="否" value="1"></el-radio>
                        <el-radio label="是" value="2"></el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item
                      label-width="55px"
                      label="分值"
                      prop="realname"
                      class="postInfo-container-item"
                    >
                      <el-input placeholder="请输入分值" v-model="postForm.realname"></el-input>
                    </el-form-item>
                  </el-col>-->
                </el-row>
              </fieldset>
              <div style="padding:10px;" class="container">
                <div class="left">
                  <fieldset class="fieldInfo">
                    <legend>
                      <span>组织指标树</span>
                    </legend>
                    <div class="tree">
                      <el-tree
                        ref="organizationTree"
                        :data="organizationData"
                        node-key="id"
                        default-expand-all
                        :expand-on-click-node="false"
                        @node-click="handleNodeClick"
                        :props="props"
                      ></el-tree>
                    </div>
                  </fieldset>
                </div>
                <div class="right">
                  <fieldset class="fieldInfo">
                    <legend>
                      <span>指标信息</span>
                    </legend>
                    <div class="organizationDetail">
                      <el-form ref="postForm" :model="postForm" class="form-container">
                        <div class="createPost-main-container">
                          <el-row>
                            <el-col :span="24">
                              <div class="postInfo-container">
                                <el-row>
                                  <el-col :span="24">
                                    <el-form-item
                                      label-width="115px"
                                      label="指标名称"
                                      prop="organizationName"
                                      class="postInfo-container-item"
                                    >
                                      <el-input
                                        placeholder="请输入指标名称"
                                        v-model="postForm.organizationName"
                                      ></el-input>
                                    </el-form-item>
                                  </el-col>
                                  <el-col :span="24">
                                    <el-form-item
                                      label-width="115px"
                                      label="显示顺序"
                                      prop="comment"
                                      class="postInfo-container-item"
                                    >
                                      <el-input
                                        placeholder="显示顺序"
                                        v-model="postForm.comment"
                                        type="number"
                                      ></el-input>
                                    </el-form-item>
                                  </el-col>
                                  <el-col :span="24">
                                    <el-col :span="6">
                                      <el-form-item
                                        label-width="115px"
                                        label="权重"
                                        prop="comment"
                                        class="postInfo-container-item"
                                      >
                                        <el-input placeholder="输入权重" v-model="postForm.comment"></el-input>
                                      </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                      <el-form-item
                                        label-width="115px"
                                        label="分值"
                                        prop="comment"
                                        class="postInfo-container-item"
                                      >
                                        <el-input placeholder="输入分值" v-model="postForm.comment"></el-input>
                                      </el-form-item>
                                    </el-col>
                                  </el-col>
                                </el-row>
                                <el-row>
                                  <el-col :span="24">
                                    <el-form-item style="text-align: center;">
                                      <el-button type="primary" @click="editOrganization">保存节点</el-button>
                                      <el-button type="primary" @click="deleteOrganization">删除节点</el-button>
                                      <el-button
                                        type="primary"
                                        @click="dialogFormVisible = true"
                                      >新增子节点</el-button>
                                    </el-form-item>
                                  </el-col>
                                </el-row>
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                      </el-form>
                    </div>
                  </fieldset>
                </div>
              </div>
              <!-- 新增组织节点信息对话框 -->
              <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                <el-form :model="dialogForm">
                  <el-form-item label="父组织" label-width="115px">
                    <el-input v-model="dialogForm.parentOrganizationName" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="组织名称" label-width="115px">
                    <el-input v-model="dialogForm.organizationName"></el-input>
                  </el-form-item>
                  <el-form-item label="备注" label-width="115px">
                    <el-input v-model="dialogForm.comment" type="textarea" :rows="4"></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="addOrganization">确 定</el-button>
                </div>
              </el-dialog>
              <el-row>
                <el-col :span="24">
                  <el-form-item style="text-align: center;">
                    <el-button type="primary" @click="addCheckTable">保存</el-button>
                    <el-button @click="closeCurrentTag">关闭</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
// import MDinput from '@/components/MDinput'
import { validURL, validUsername } from '@/utils/validate'
import { createChecktable, lookTable, updatePaper } from '@/api/checktable'
import { searchUser } from '@/api/remote-search'
import { fetchBasics } from '@/api/checkplan'

const defaultForm = {
  status: 'draft',
  id: undefined
}

export default {
  name: 'UserDetail',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const validateRequire = (rule, value, callback) => {
      if (value === '') {
        this.$message({
          message: rule.field + '为必传项',
          type: 'error'
        })
        callback(new Error(rule.field + '为必传项'))
      } else {
        callback()
      }
    }

    const addTable = {}
    return {
      listLoading: true,
      postForm: {
        paperName: '',
        applicableObjectId: '',
        score: 0,
        flag: false
      },
      dialogFormVisible: false,
      updateForm: {
        paperName: '',
        applicableObjectId: '',
        id: '',
        score: 0,
        flag: false
      },
      dialogForm: {
        parentOrganizationName: '',
        organizationName: '',
        comment: ''
      },
      loading: false,
      // userListOptions: [],
      rules: {
        tableName: [
          { required: true, message: '检查表名不能为空', trigger: 'blur' }
        ],
        target: [
          { required: true, message: '检查目标不能为空', trigger: 'blur' }
        ]
      },
      tempRoute: {},
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      ddlTarget: [],
      props: {
        label: 'name'
      },
      organizationData: [
        {
          id: 1,
          name: '指标1',
          parentOrg: 0,
          deleteFlag: 1,
          comment: '',
          children: [
            {
              id: 2,
              name: '指标1-1',
              parentOrg: 1,
              deleteFlag: 1,
              comment: '',
              children: []
            },
            {
              id: 3,
              name: '指标1-2',
              parentOrg: 1,
              deleteFlag: 1,
              comment: '',
              children: []
            }
          ]
        },
        {
          id: 1,
          name: '指标2',
          parentOrg: 0,
          deleteFlag: 1,
          comment: '',
          children: [
            {
              id: 2,
              name: '指标2-1',
              parentOrg: 1,
              deleteFlag: 1,
              comment: '',
              children: []
            },
            {
              id: 3,
              name: '指标2-2',
              parentOrg: 1,
              deleteFlag: 1,
              comment: '',
              children: []
            }
          ]
        }
      ] //指标树
    }
  },
  created() {
    if (this.isEdit) {
      //如果是编辑数据
      const id = this.$route.params && this.$route.params.id
      const paperId = { paper_id: id }
      this.fetchTable(paperId)
    }
    this.getBasics()
    this.tempRoute = Object.assign({}, this.$route)
  },
  methods: {
    //基础
    getBasics() {
      this.listLoading = true
      fetchBasics().then((response) => {
        var listData = response.data.ddlTarget

        this.ddlTarget = listData //检查目标
        // console.log(this.ddlTarget)
        this.listLoading = false
      })
    },
    //新增检查表
    addCheckTable() {
      if (this.postForm.targetId != '' && this.postForm.paperName != '') {
        if (!this.isEdit) {
          createChecktable(this.postForm)
            .then((res) => {
              if (res.success) {
                this.$notify({
                  title: '成功',
                  message: '新增检查表成功',
                  type: 'success',
                  duration: 2000
                })
                this.postForm = {}
                this.loading = false
              } else {
                this.$notify({
                  title: '失败',
                  message: '新增检查表失败',
                  type: 'error',
                  duration: 2000
                })
              }
              console.log(res)
            })
            .catch((err) => {
              console.log(err)
            })
        } else {
          this.postForm.id = this.updateForm.id
          updatePaper(this.postForm)
            .then((res) => {
              if (res.success) {
                this.$notify({
                  title: '成功',
                  message: '修改检查表成功',
                  type: 'success',
                  duration: 2000
                })
                this.postForm = {}
                this.loading = false
              } else {
                this.$notify({
                  title: '失败',
                  message: '修改检查表失败',
                  type: 'error',
                  duration: 2000
                })
              }
              console.log(res)
            })
            .catch((err) => {
              console.log(err)
            })
        }
      } else {
        this.$notify({
          title: '失败',
          message: '新增检查表内容不允许为空',
          type: 'error',
          duration: 2000
        })
      }
    },
    setTagsViewTitle() {
      const title = '修改检查表'
      const route = Object.assign({}, this.tempRoute, {
        title: `${title}-${this.postForm.id}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    setPageTitle() {
      const title = '修改检查表'
      document.title = `${title} - ${this.postForm.id}`
    },
    submitForm() {
      console.log(this.postForm)
      this.$refs.postForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.$notify({
            title: '成功',
            message: '新增用户成功',
            type: 'success',
            duration: 2000
          })
          this.postForm.status = 'published'
          this.loading = false
        } else {
          this.$notify({
            title: '失败',
            message: '新增用户失败',
            type: 'error',
            duration: 2000
          })
          return false
        }
      })
    },
    fetchTable(paperId) {
      //   return console.log(paperId)
      lookTable(paperId)
        .then((response) => {
          // console.log('xixi', response)
          if (response.success) {
            this.updateForm = response.data.paper
            this.postForm.paperName = response.data.paper.paperName
            this.postForm.applicableObjectId =
              response.data.paper.applicableObject
            this.ddlTarget = response.data.this.setTagsViewTitle()

            // set page title
            this.setPageTitle()
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    handleNodeClick(data, node) {
      console.log(data, node)
      this.currentSelectNode = node
      this.postForm.organizationName = data.name
      this.dialogForm.parentOrganizationName = data.name
      this.postForm.comment = data.comment
    },
    handleOrganizationNodeClick(node) {
      // console.log(node, 'node')
      this.postForm.organization.name = node.label
      this.postForm.organization.key = node.label
    },
    closeCurrentTag() {
      // 调用全局挂载的方法
      this.$store.dispatch('tagsView/delView', this.$route)
      // 返回上一步路由
      this.$router.go(-1)
    },
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
.butt {
  overflow: hidden;
}
.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 5px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }
}
.container {
  display: flex;
  .fieldInfo {
    border-color: #eee;
    border-width: 1px;
    border-style: solid;
    margin-bottom: 20px;
    height: 55vh;
    legend {
      color: #666;
    }
  }
  .left {
    flex: 1;
  }
  .right {
    flex: 2;
  }
}
.fieldInfo {
  border-color: #eee;
  border-width: 1px;
  border-style: solid;
  margin-bottom: 20px;
  legend {
    color: #666;
  }
}
</style>
